<template>
    <div class="app-container">
        <!-- 搜索栏 -->
        <iv-search-bar labelWidth="70px" :columns="searchbars" :query="listQuery" />
        <!-- 工具栏 -->
        <section class="filter-container">
            <iv-toolbar :span="2" :columns="toolbars"/>
        </section>
        <!-- 表格 -->
        <iv-table 
            :data="tableData" 
            :columns="tableColumn" 
            v-loading="loading" 
            element-loading-text="正在查询中。。。" 
            highlight-current-row 
            stripe 
            @selection-change="handleSelectionChange" 
            />
        <!-- 分页 -->
        <iv-pagination :autoScroll="scroll" :query="listQuery" @initList="initList"/>
        <!-- 模态框 -->
        <iv-dialog :columns="dialogs" :form="form" :show.sync="dialog.show" @submit="submit" :title="dialog.title" width="600px"/>
        <!-- 回到顶部 -->
        <back-to-top :visibility-height="300" :back-position="50" transition-name="fade"/>
    </div>
</template>
<script>
import ivSearchBar from '@/components/IvSearchBar'
import { initColumns } from './searchBar'
import ivToolbar from '@/components/IvToolbar'
import { toolbars } from './toolbar'
import ivPagination from '@/components/IvPagination'
import ivDialog from '@/components/IvDialog'
import { dialogsFunc } from './dialog'
import ivTable from '@/components/IvTable'
import { tableColumn } from './btnTable'
import { employeeList, employeeAdd, employeeEdit, employeeDel } from '@/api/employee'
import backToTop from '@/components/BackToTop'

export default {
    components: {
        ivSearchBar,
        ivToolbar,
        ivPagination,
        ivDialog,
        ivTable,
        backToTop
    },
    data(){
        return {
            searchbars: initColumns(this.search),
            toolbars: [],
            tableColumn: tableColumn(this.edit, this.del),
            dialogs: [],
            listQuery: {start: 0, limit: 10, total: 100, current: 1},
            form: {},
            dialog: {show: false, title: ''},
            loading: false,
            tableData: [],
            multipleSelection: [],
            scroll: false
        }
    },
    methods: {
        search(){
            this.initList();
        },
        handleSelectionChange(val){
            this.multipleSelection = val
        },
        open(){
            this.form = {}
            this.dialog.show = true;
            this.dialog.title = '添加';
        },
        async del(row) {
            await employeeDel(row)
            this.$message.success("删除成功")
            this.initList();
        },
        edit(row){
            this.form = row;
            this.dialog.show = true;
            this.dialog.title = '编辑';
        },
        async submit(){
            const { id } = this.form;
            if (id) {
                await employeeEdit(this.form)
                this.$message.success("修改成功")
            } else {
                await employeeAdd(this.form)
                this.$message.success("添加成功")
            }
            this.dialog.show = false;
            this.initList();
        },
        autoScroll(){
            this.scroll = !this.scroll;
            this.$message.success('顶部回滚' + (this.scroll ? '开启' : '关闭'))
        },
        async initList(){
            this.loading = true;
            let { data } = await employeeList(this.listQuery);
            const { count, list } = data
            this.loading = false
            const role = {
                admin: '管理员',
                employee: '员工'
            }
            this.tableData = list.map(item => {
                return {
                    ...item,
                    sex: item.sex == '1'? '男': '女',
                    type: role[item.type]
                }
            });
            this.listQuery.total = count;
            this.toolbars = toolbars(this.open)
        },
        async initDialog() {
            this.dialogs = await dialogsFunc()
        }
    },
    created(){
        this.initList();
        this.initDialog()
    }
}
</script>
